<template>
  <div>
    <el-card class="main_card">
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      boxHeight="400"
      :messageHeight="messageHeight"
      :percent="100">
    </vue-baberrage>
      <el-card style="margin-top: 400px">
        <span class="main-title">18软嵌 谢亮亮 个人医疗信息系统！</span>
      </el-card>

    </el-card>
  </div>
</template>

<script>
    import Vue from 'vue';
    import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage';
    Vue.use(vueBaberrage);
    export default {
        name: "chat",
        data() {
            return {
                msg: '~',
                barrageIsShow: true,
                messageHeight: 3,
                boxHeight: 900,
                barrageLoop: true,
                maxWordCount: 3,
                throttleGap: 5000,
                barrageList: []
            }
        },
        mounted() {
            this.addToList()
        },
        methods: {
            addToList() {
                let list = [
                    {
                        id: 1,
                        avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/X08sO98zPibUPyghGLPHWdPktykLqgbWiaInAicibesBo7KpsZB8rMUXA4SWxLayH89k5YELjlYdapLzbZkeD6Pg0A/132',
                        msg: "人生若只如初见",
                        time: 1,
                        barrageStyle: 'red'
                    },
                    {
                        id: 2,
                        avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/X08sO98zPibUPyghGLPHWdPktykLqgbWiaInAicibesBo7KpsZB8rMUXA4SWxLayH89k5YELjlYdapLzbZkeD6Pg0A/132',
                        msg: "欢饮来到个人医疗信息系统",
                        time: 2,
                        barrageStyle: 'green'
                    },
                    {
                        id: 3,
                        avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/X08sO98zPibUPyghGLPHWdPktykLqgbWiaInAicibesBo7KpsZB8rMUXA4SWxLayH89k5YELjlYdapLzbZkeD6Pg0A/132',
                        msg: "阿呼呼 solute",
                        time: 3,
                        barrageStyle: 'normal'
                    },
                    {
                        id: 4,
                        avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/X08sO98zPibUPyghGLPHWdPktykLqgbWiaInAicibesBo7KpsZB8rMUXA4SWxLayH89k5YELjlYdapLzbZkeD6Pg0A/132',
                        msg: "感谢各位老师",
                        time: 4,
                        barrageStyle: 'blue'
                    },
                    {
                        id: 5,
                        avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/X08sO98zPibUPyghGLPHWdPktykLqgbWiaInAicibesBo7KpsZB8rMUXA4SWxLayH89k5YELjlYdapLzbZkeD6Pg0A/132',
                        msg: "感谢各位老师",
                        time: 5,
                        barrageStyle: 'blue'
                    },
                    {
                        id: 6,
                        avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/X08sO98zPibUPyghGLPHWdPktykLqgbWiaInAicibesBo7KpsZB8rMUXA4SWxLayH89k5YELjlYdapLzbZkeD6Pg0A/132',
                        msg: "欢饮来到个人医疗信息系统",
                        time: 6,
                        barrageStyle: 'blue'
                    }
                ];
                list.forEach((v) => {
                    this.barrageList.push({
                        id: v.id,
                        avatar: v.avatar,
                        msg: v.msg,
                        time: v.time,
                        type: MESSAGE_TYPE.NORMAL,
                        barrageStyle: v.barrageStyle
                    });
                });
            }
        }
    }
</script>

<style scoped>
  .main-title{
    margin-top:20% ;
    font-size: 60px;
    font-family: 华文行楷;
    color:#42b983;


  }
</style>
